<template>
  <div class="chargeList-wrapper">
    <div class="content">
      <div class="actions">
        <div class="left">
          <!-- <el-button style="margin-right: 10px" type="primary" plain size="mini" @click="clickEditPropFn">回单回收</el-button> -->
          <el-button
            style="margin-bottom: 10px"
            type="primary"
            plain
            size="mini"
            @click="handleClickAdd"
            >新增</el-button
          >
          <el-button
            style="margin-bottom: 10px"
            type="primary"
            plain
            size="mini"
            @click="handleClickDel"
            >删除</el-button
          >
        </div>
        <div class="right">
          <el-pagination
            :current-page="paginations.pageIndex"
            :page-sizes="paginations.pageSizes"
            :page-size="paginations.pageSize"
            :layout="paginations.layout"
            :total="paginations.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        stripe
        align="center"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column
          prop=""
          fixed
          label="序号"
          width="50"
          type="index"
        ></el-table-column>

        <el-table-column prop="branch_name" label="网点"> </el-table-column>
        <el-table-column prop="operation_name" label="运营负责人">
        </el-table-column>
        <el-table-column prop="action_name" label="调度负责人">
        </el-table-column>
        <el-table-column prop="dispatch_name" label="操作负责人">
        </el-table-column>
        <el-table-column label="操作" width="50" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="handleClickEdit(scope.row, 'edit')"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="负责人设置"
      width="500px"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="网点" prop="branch_id">
          <el-cascader
            ref="cascader"
            style="width: 180px"
            :options="branchData"
            :show-all-levels="false"
            v-model="ruleForm.branch_id"
            :props="{
              emitPath: false,
              checkStrictly: true,
              label: 'branch_name',
              value: 'id',
              children: 'next_level_data',
            }"
            clearable
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="运营负责人" prop="operation_id">
          <el-select
            v-model="ruleForm.operation_id"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in chargeData"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作负责人" prop="action_id">
          <el-select
            v-model="ruleForm.action_id"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in chargeData"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调度负责人" prop="dispatch_id">
          <el-select
            v-model="ruleForm.dispatch_id"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in chargeData"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  ResponsibleList,
  ResponsibleAdd,
  ResponsibleUpdate,
  ResponsibleDelete,
} from "@/api/companymanagement";
import { searchChargeData } from "@/api/waybill";
import { organizationBox } from "@/api/organization";

export default {
  name: "chargeList",
  components: {},
  props: [],
  data() {
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      tableData: [],
      dialogFormVisible: false,
      ruleForm: {},
      chargeData: [],
      branchData: [],
      mode: "",
      checkedOrders: [],
      rules: {
        branch_id: [
          { required: true, message: "请选择网点", trigger: "change" },
        ],
        operation_id: [
          { required: true, message: "请选择运营负责人", trigger: "change" },
        ],
        action_id: [
          { required: true, message: "请选择操作负责人", trigger: "change" },
        ],
        dispatch_id: [
          { required: true, message: "请选择调度负责人", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getListData();
    searchChargeData({}).then((res) => {
      this.chargeData = res.data;
    });
    organizationBox(
            { not_show_first_branch : 1, }
        ).then(res => {
            this.branchData = res.data;
        });
  },
  methods: {
    handleOK() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        const Fn = this.mode === "edit" ? ResponsibleUpdate : ResponsibleAdd;
        Fn(this.ruleForm).then((res) => {
          if (res.code === 10000) {
            if (this.mode === "edit") {
              this.$message({
                message: "修改成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "新建成功",
                type: "success",
              });
            }
            this.dialogFormVisible = false;
            this.getListData();
          }
        });
      });
    },
    getListData() {
      ResponsibleList({
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
      }).then((res) => {
        this.tableData = res.data.list || [];
        this.paginations.total = res.data.pagination.total;
      });
    },
    handleClickAdd() {
      this.mode = "add";
      this.ruleForm = {};
      this.dialogFormVisible = true;
    },
    handleClickDel() {
      if (this.checkedOrders.length === 0) {
        this.$message({
          type: "warning",
          message: "请选中后进行操作",
        });
        return;
      }
      ResponsibleDelete({
        ids: this.checkedOrders,
      }).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getListData();
        }
      });
    },
    handleClickEdit(item) {
      this.mode = "edit";
      this.ruleForm = item;
      this.dialogFormVisible = true;
    },
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getListData();
    },
    handleSelectionChange(val) {
      this.checkedOrders = val.map((item) => item.id);
    },
  },
};
</script>
<style lang="scss" scoped>
.chargeList-wrapper {
  background-color: #fff;

  // padding: 10px;
  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;
  }

  .content {
    // padding: 0 0 0 10px;
    background-color: #fff;
  }

  .orderHeader {
    background-color: #fff;

    .orderSearch {
      // padding-left: 10px;

      form {
        ::v-deep .el-form-item__label {
          font-size: 14px;
        }

        .el-textarea {
          width: 135px;
        }
      }
    }
  }
}
</style>